<!-- 首页 -->
<template>
	<view>
		<view class="coin-box">
			<view>{{msg}}</view>
		</view>
		<view class="confrim-btn">
			<u-button size="medium" type="primary" @click="handleCash">关注服务号</u-button>
		</view>
	</view>
</template>

<script>
import {mapState} from 'vuex';
export default {
	props: {
		msg: {
			// 动态数据
			type: String,
			required: false,
			default: function() {
				return '关注服务号可红包提现';
			}
		},
	},
	data() {
		return {
			currentIndex: 0,
			cashCoin: 0,
			disabled: true,
			dataList: [
				{
					'coin': 200,
					active: true,
				},
				{
					'coin': 2000,
					active: false,
				},
				{
					'coin': 4000,
					active: false,
				},
				{
					'coin': 10000,
					active: false,
				},
				{
					'coin': 20000,
					active: false,
				},
				{
					'coin': 40000,
					active: false,
				}
			]
		};
	},
	computed: {
		...mapState(['vuex_cash_amount']),
	},
	methods: {
		init() {
			this.disabled = false;
		},
		cannel() {
			this.$emit('cannel');
		},
		record() {
			this.$u.route({
				url: 'packgeMine/pages/me/cash/order',
			});
		},
		changeTab(index) {
			this.currentIndex = index;
			this.cashCoin = this.dataList[index].coin;
			if(this.cashCoin <= this.vuex_cash_amount){
				this.disabled = false;
			}else{
				this.disabled = true;
			}
		},
		handleCash() {
			/* this.$u.post('/pay/coinCash/add',{
				coinNum: this.cashCoin,
			}).then(res => {
				uni.showToast({
					title: '提现申请成功',
					icon:'success',
					duration: 2000
				});
				this.$emit('ok');
			}); */
			this.$u.get('/wx/mpApp/getQrCode').then(res => {
				uni.previewImage({
					current: 0, //预览图片的下标
					urls: res.data, //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
					indicator: 'number',
					loop: true
				});
			});
		},
		toVip() {
			this.cannel();
			this.$u.route({
				url: 'packgeMine/pages/me/cash/cash',
			});
		},
	}
}; 
</script>
<style lang="scss" scoped>
	.label {
		margin-bottom: 15px;
		font-size: 14px;
		font-weight: bold;
	}
	.amount {
		font-size: 30rpx;
		font-weight: bold;
	}
	.coin-box {
		padding: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: bold;
		font-size: 34rpx;
	}
	.coin-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40px;
	}
	.record {
		font-size: 20rpx;
		line-height: 20px;
		color: #303133;
		background: #c0c4cc;
		padding: 3px 10px;
		border-radius: 3px;
		font-weight: bold;
	}
	.coin-tip {
		font-size: 28rpx;
		color: red;
		font-weight: bold;
		padding: 15px;
		display: flex;
		justify-content: center;
		background: #ffeaea;
	}
	.confrim-btn {
		padding: 30px;
		display: flex;
		padding-top: 0;
		justify-content: center;
		padding-bottom: 130px;
	}
	.ad-btn-box {
		padding: 15px;
		display: flex;
		justify-content: center;
		flex: 1;
	}
	.ad-btn {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.vip-tab-box {
		display: flex;
		align-items: center;
		padding: 20px 15px;
		justify-content: space-between;
		margin-bottom: 15px;
		background-image: linear-gradient(180deg, #f9a470, #db854e);
		border-radius: 10px;
		color: #fff;
		font-weight: bold;
		font-size: 28rpx;
	}
	.card-num-box {
		display: flex;
		flex-wrap: wrap;
	}
	.card-num-border {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 33.3%;
		padding-right: 10px;
		margin-bottom: 10px;
	}
	.card-num {
		border: 4px solid #f5e8e8;
		color: #858585;
		font-size: 14px;
		font-weight: bold;
		border-radius: 10px;
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: center;
		padding: 20px 0px;
	}
	.card-num-box .active {
		border: 8rpx solid #e09049;
		color: #e09049;
	}
	.card-num-box .card-num-border:nth-child(3n) {
		padding-right: 0;
	}
</style>
